﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RoleConfig_Entity.aspx.cs" Inherits="Easy.Web.Pages.PrivilegePages.RoleConfig_Entity" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="/_css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/_css/common.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/_css/iconfont.css" />
    <script src="/_js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/_js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/_js/json2.js" type="text/javascript"></script>
    <script src="/_js/custom.js" type="text/javascript"></script>
    <style>
        ul {
            list-style-type: none;
        }

        .title, li {
            height: 25px;
        }

        input[type='checkbox'] {
            margin-right: 10px;
        }

        .row {
            margin-right: 0px;
        }

        .panel {
            border: none;
        }

        .page-header {
            margin: 15px;
        }

            .page-header + .btn-primary {
                margin: 0px 15px 10px 5px;
            }

        .panel-heading {
            padding: 3px 15px;
            height: 40px;
            line-height: 34px;
        }

        .table {
            padding: 0;
            margin: 0;
            border: none;
        }

            .table thead th, .table tbody td {
                width: 168px;
            }

                .table th.table-btn, .table tbody td.table-btn {
                    width: 100px;
                }

                .table th:first-child, .table tbody td:first-child {
                    width: 30px;
                }

        #entityList_div, #table-title {
            min-width: 1149px;
        }

        .table-responsive {
            border: 1px solid #e1e6eb;
            border-top: none;
        }

        #table-title {
            position: relative;
        }

            #table-title thead tr th {
                border-bottom: none;
            }

        @media screen and (max-width: 767px) {
            .table-responsive {
                margin-bottom: 0px;
                border: none;
                overflow: auto;
                border: 1px solid #e1e6eb;
                border-top: none;
            }
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var roleId = $("#RoleId").val();
            GetSiteMapForRole(roleId);


            //横向绑定，填充表头背景
            $("#table-title").parent().css({ "background": "#F5F6FA", "border-top": "1px solid #e1e6eb", "border-bottom": "1px solid #e1e6eb" });
            $("div.table-responsive").scroll(function () {
                var left = (-1) * $(this).scrollLeft();
                $("#table-title").css("left", left);
            });
        }

        function GetSiteMapForRole(roleId) {
            $.ajax({
                url: "/Service/Privilege/SiteMap.ashx",
                async: false,
                type: "post",
                dataType: "JSON",
                data: {
                    RoleId: roleId
                },
                success: function (data) {
                    var str2 = "";

                    var str2 = "<div id='scroll-table'><table class='table table-hover'><tbody>";
                    for (var i = 0; i < data.length; i++) {


                        if (i == 0) {
                            if (data[i].Privilege == 0) {
                                str2 += " <dd ClientType='" + data[i].ClientType + "'> <div  class='title'><input type='checkbox' name='father' chk='" + data[i].Privilege + "' SiteMapId='" + data[i].SiteMapId + "'/>" + data[i].Name + "</div><ul class='menuson'>"
                            } else if (data[i].Privilege == 1) {
                                str2 += " <dd ClientType='" + data[i].ClientType + "'> <div  class='title'><input type='checkbox' name='father' checked='checked' chk='" + data[i].Privilege + "' SiteMapId='" + data[i].SiteMapId + "'/>" + data[i].Name + "</div><ul class='menuson'>"
                            }
                        } else {

                            if (data[i].Privilege == 0) {
                                str2 += " </ul></dd><dd ClientType='" + data[i].ClientType + "'> <div  class='title'><input type='checkbox' name='father' chk='" + data[i].Privilege + "' SiteMapId='" + data[i].SiteMapId + "'/>" + data[i].Name + "</div><ul class='menuson'>"
                            } else if (data[i].Privilege == 1) {
                                str2 += " </ul></dd><dd ClientType='" + data[i].ClientType + "'> <div  class='title'><input type='checkbox' name='father' checked='checked' chk='" + data[i].Privilege + "' SiteMapId='" + data[i].SiteMapId + "'/>" + data[i].Name + "</div><ul class='menuson'>"
                            }
                        }


                        for (var j = 0; j < data[i].ChildSiteMap.length; j++) {

                            if (data[i].ChildSiteMap[j].Privilege == 0) {
                                str2 += "<li><input type='checkbox' name='son' chk='" + data[i].ChildSiteMap[j].Privilege + "' SiteMapId='" + data[i].ChildSiteMap[j].SiteMapId + "'/>" + data[i].ChildSiteMap[j].Name + "</li>"
                            } else if (data[i].ChildSiteMap[j].Privilege == 1) {
                                str2 += "<li><input type='checkbox' name='son' checked='checked' chk='" + data[i].ChildSiteMap[j].Privilege + "' SiteMapId='" + data[i].ChildSiteMap[j].SiteMapId + "'/>" + data[i].ChildSiteMap[j].Name + "</li>"
                            }

                        }
                        str2 += "</ul></dd>";

                    }
                    str2 += "</tbody></table></div>";

                    $("#list_div").html(str2);


                    //滚动table的高度
                    var height = window.innerHeight - 170;
                    $("#scroll-table").height(height);

                    //checkbox的二级联动
                    $(".title input").on('click', function () {//父级选中子集全选
                        var check = $(this).prop('checked');
                        if ($(this).prop('checked')) {
                            $(this).parent().siblings().find("input").prop('checked', check);
                            $(this).parent().siblings().find("input").attr('chk', '1');
                        } else {
                            $(this).parent().siblings().find("input").prop('checked', check);
                            $(this).parent().siblings().find("input").attr('chk', '0');
                        }
                    });
                    $("input[name=son]").on('click', function () {//子级有一个选中则父级选中，全部取消则父级取消
                        var son = $(this).parent().parent().children();
                        var flag = 0;
                        for (var i = 0; i < son.length; i++) {

                            if ($(son[i]).find("input").prop('checked') == false) {
                                flag++;
                            }
                        }

                        if (flag == son.length) {
                            $(son).parent().siblings().find("input").prop('checked', false);
                            $(son).parent().siblings().find("input").attr('chk', '0');
                        } else {
                            $(son).parent().siblings().find("input").prop('checked', true);
                            $(son).parent().siblings().find("input").attr('chk', '1');
                        }
                    })

                    show(10);
                },
                error: function (data) {
                    alert("ajax错误");
                }
            });

        }

        function btn_update() {
            var SiteMap = [];
            //站点图修改后信息
            $("#list_div").find("input[type=checkbox]").each(function () {
                var checkbox = {};
                if ($(this).prop('checked')) {
                    checkbox["SiteMapName"] = $(this).parent().text();
                    checkbox["SiteMapId"] = $(this).attr("SiteMapId");
                    checkbox["SiteMapchk"] = $(this).attr("chk");
                    SiteMap.push(checkbox);
                }
            });

            $.ajax({
                url: "/Service/Privilege/UpdateRole.ashx",
                async: false,
                type: "post",
                dataType: "JSON",
                data: {
                    "RoleId": $("#RoleId").val(),
                    "ShowType": "2",
                    "RolePrivilege": "",
                    "SiteMap": JSON.stringify(SiteMap)
                },//ShowType=1则表示修改实体权限 2为修改站点图信息
                success: function (data, textStatus) {


                    if (data.Result == "0") {
                        location.reload();
                    }
                    else {
                        alert(data.Remark);
                    }
                },
                error: function (data, textStatus) {
                    alert("错误");

                }

            });

        }
        function show(type) {
            if (type == "10")
            {
                $("#pcclient").removeClass("btn-default").addClass("btn-primary");
                $("#mobileclient").removeClass("btn-primary").addClass("btn-default");
                $("dd[ClientType=10]").show();
                $("dd[ClientType=20]").hide();
            }
            if (type == "20") {
                $("#pcclient").removeClass("btn-primary").addClass("btn-default");
                $("#mobileclient").removeClass("btn-default").addClass("btn-primary");
                $("dd[ClientType=10]").hide();
                $("dd[ClientType=20]").show();
            }
        }
        
    </script>
</head>
<body>
    <form id="form2" runat="server">

        <div class="">
            <div class="row">
                <div class="col-lg-12">
                    <input id="RoleId" type="hidden" value="<%=role.RoleId %>" />
                    <input id="BusinessUnitId" type="hidden" value="<%=role.OwningBusinessUnit %>" />
                    <h1 class="page-header">站点图
                        <button type='button' id='btn_updateSiteMap' class='btn btn-primary ng-binding' style="float: right;"
                            onclick="btn_update();">
                            <span class="glyphicon glyphicon-floppy-save"></span>&nbsp;保存</button></h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>

            <div class="row">
                <div class="col-lg-12" style="margin-left: 15px; margin-right: 15px">
                    <button id="pcclient" type='button' class='btn btn-primary' onclick="show(10)">
                        电脑端
                    </button>
                    <button id="mobileclient" type='button' class='btn btn-default' onclick="show(20)">
                        移动端
                    </button>
                </div>
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="table-responsive" style="overflow: hidden; border-bottom: none;">
                                <div id="table-title" style="height: 35px;">
                                </div>
                            </div>
                            <div class="table-responsive">
                                <div id="list_div" style="padding: 0 20px 0 20px;">
                                </div>
                            </div>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
            </div>
        </div>



    </form>
</body>
</html>
